<template>
    <div class="quyu">
        <section class="content-header">
            统计分析&nbsp;/&nbsp;区域用水情况统计
        </section>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-sm-4 clearfix">
                        <label class="col-sm-3 control-label">创建时间：</label>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input type="text" class="form-control pull-right" id="datepicker1" placeholder="YYYY-MM-DD" v-model="timeData.timeStart">
                            </div>
                        </div>
                        <div class="col-sm-1" style="height:34px;line-height:34px">--
                            <!-- <span style="display:inline-block;height:34px;line-height:34px"></span> -->
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group date">
                                <input type="text" class="form-control pull-right" id="datepicker2" placeholder="YYYY-MM-DD" v-model="timeData.timeEnd">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 clearfix">
                        <div class="col-sm-2 col-sm-offset-1">
                            <button type="button" class="btn btn-primary" @click="select()">查询</button>
                        </div>
                        <div class="col-sm-2 col-sm-offset-7">
                            <button type="button" class="btn btn-primary">导出</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="clearfix chartBox">
            <div ref="echartContainer" style="width:100%; height:500px"></div>
            <div class="box">
                <div class="box-body">
                    <table id="example" class="table table-bordered table-hover" style="font-size:14px;text-align:center">
                        <thead style="font-weight:700">
                            <tr>
                                <td>营业所</td>
                                <td>片区</td>
                                <td>大用户(个)</td>
                                <td>总用水量(m³)</td>
                                <td>总排水量(m³)</td>
                            </tr>
                        </thead>
                        <tbody v-if="form.length==0">
                            <tr>
                                <td colspan="999">暂无数据</td>
                            </tr>
                        </tbody>
                        <tbody v-for="item1 in form" :key="item1.value">
                            <tr>
                                <td :rowspan="item1.qyFormDates.length+1" style="vertical-align: middle;">{{item1.areaPName}}</td>
                            </tr>
                            <tr v-for="item2 in item1.qyFormDates" :key="item2.value">
                                <td>{{item2.areaName}}</td>
                                <td>{{item2.bigNum}}</td>
                                <td>{{item2.ySum}}</td>
                                <td>{{item2.pSum}}</td>
                            </tr>
                        </tbody>
                        <tbody>
                            <tr>
                                <td colspan="2">合计</td>
                                <td>{{sum.hjBig}}</td>
                                <td>{{sum.hjYS}}</td>
                                <td>{{sum.hjPS}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    data() {
        return {
            timeData: {
                timeStart: utils.nowDate(-7),
                timeEnd: utils.nowDate(0),
            },
            list: {},
            form: [],
            sum: {}
        }
    },
    mounted() {
        this.selectDate1()
        this.selectDate2()
        this.select()
    },
    methods: {
        //日期选择
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'month',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.timeData.timeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'month',
                    minView: 'month'
                })
                .on("changeDate", ev => {
                    this.timeData.timeEnd = ev.target.value;
                });
        },
        getList(callback) {
            this.$api.tongji.qyChat(this.timeData).then(res => {
                if (res.success) {
                    this.list = res.data
                    callback()
                }
            });
        },
        getForm() {
            this.$api.tongji.qyform(this.timeData).then(res => {
                if (res.success) {
                    this.form = res.data.list
                    this.sum = res.data
                }
            });
        },
        //echart图标
        select() {
            this.getForm()
            let myChart = echarts.init(this.$refs.echartContainer);
            this.getList(() => {
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总用水量m³', '总排水量m³']
                    },
                    toolbox: {
                        show: true
                    },
                    calculable: true,
                    grid: { // 控制图的大小，调整下面这些值就可以，
                        x: 50,
                        x2: 50,
                        y2: 50 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.list.areaName
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '总用水量m³',
                            type: 'bar',
                            data: this.list.gWater,
                            itemStyle: {
                                normal: {
                                    color: '#5b9bd5',
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                        }
                                    }
                                }
                            }
                        },
                        {
                            name: '总排水量m³',
                            type: 'bar',
                            data: this.list.pWater,
                            itemStyle: {
                                normal: {
                                    color: '#ed7d31',
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                        }
                                    }
                                }
                            }
                        }
                    ]
                });
            });
        }
    }
}
</script>

<style>
</style>
